<template>
    <!-- 新增分类按钮 -->
    <el-button type="primary" @click="addCategoryBtnClick">
        <el-icon class="mr-1">
            <Plus />
        </el-icon>
        新增分类</el-button>
    <!-- 添加分类 -->
    <FormDialog ref="formDialogRef" title="添加文章分类" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :rules="rules" :model="form">
            <el-form-item label="分类名称" prop="name" label-width="80px" size="large">
                <el-input v-model="form.name" placeholder="请输入分类名称" maxlength="20" show-word-limit clearable />
            </el-form-item>
        </el-form>
    </FormDialog>
</template>

<script setup>
// 引入所需图标
import { reactive, ref } from 'vue'
import FormDialog from '@/components/FormDialog.vue'
import { addCategory } from '@/api/admin/category'
import { showMessage } from '@/composables/util'


// 添加文字分类表单对象
const form = reactive({
    name: ''
})
// 新增分类对话框是否显示
const formDialogRef = ref(null)
// 分类表单引用
const formRef = ref(null)

const onSubmit = () => {
    // 先验证 form 表单字段
    formRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            return false
        }
        // 显示提交按钮 loading
        formDialogRef.value.showBtnLoading()

        // 请求添加分类接口
        addCategory(form).then((res) => {
            if (res.success == true) {
                showMessage('添加成功')
                // 将表单中分类名称置空
                form.name = ''
                // 隐藏对话框
                formDialogRef.value.close()
            } else {
                // 获取服务端返回的错误消息
                let message = res.message
                // 提示错误消息
                showMessage(message, 'error')
            }
        }).finally(() => formDialogRef.value.closeBtnLoading())// 隐藏提交按钮 loading
    })
}

// 新增分类按钮点击事件
const addCategoryBtnClick = () => {
    formDialogRef.value.open()
}

// 规则校验
const rules = {
    name: [
        {
            required: true,
            message: '分类名称不能为空',
            trigger: 'blur'
        },
        { min: 1, max: 20, message: '分类名称字数要求大于 1 个字符，小于 20 个字符', trigger: 'blur' },
    ]
}


</script>